<template>
    <div>
        <div class="container loginIn">
            
            <div :class="'left center'">
                <el-form class="login-form" label-position="left">
                    <div class="title-container"><h3 class="title">网上图书商城登录</h3></div>
                    <el-form-item
                         :label="1 == 3 ? '用户名' : ''" :class="'style'+1">
            <span v-if="1 != 3" class="svg-container" style="
			color:rgba(28, 129, 137, 1);
			line-height:30px;
			font-size:16px;
			padding:0;
			border-width:0;
			border-style:solid;
			border-color:rgba(0,0,0,0);
			background-color:rgba(144, 238, 144, 0);
			box-shadow:0 0 6px rgba(0,0,0,0);
			}"></span>
                        <el-input prefix-icon="el-icon-user-solid" style="width: 60%" placeholder="请输入用户名"
                                  name="username" type="text" v-model="rulesForm.username"/>
                    </el-form-item>
                    
                    <el-form-item
                         :label="1 == 3 ? '密码' : ''" :class="'style'+1">
            <span v-if="1 != 3" class="svg-container" style="color:rgba(28, 129, 137, 1);
			line-height:30px;
			font-size:16px;
			padding:0;
			border-width:0;
			border-style:solid;
			border-color:rgba(0,0,0,0);
			background-color:rgba(144, 238, 144, 0);
			box-shadow:0 0 6px rgba(0,0,0,0);"></span>
                        <el-input prefix-icon="el-icon-lock" style="width: 60%" placeholder="请输入密码" name="password"
                                  type="password" v-model="rulesForm.password"/>
                    </el-form-item>
                    <div style="display: flex;">
                        <el-button type="primary" @click="login()" class="loginInBt">{{ '登录' }}</el-button>
                        <el-button type="primary" @click="register()" class="loginInBt">{{ '注册' }}</el-button>
                    </div>
                    <el-form-item class="setting">
                        <!-- <div style="color:${template2.back.login.loginInSettingFontColor}" class="reset">修改密码</div> -->
                    </el-form-item>
                </el-form>
            </div>
        
        </div>
    </div>
</template>
<script>

import {login} from "@/api/system/login"

import {carCount} from "@/api/book/shopCar";

export default {
    name: "Login",
    data() {
        return {
            rulesForm: {
                username: "",
                password: "",
                role: "",
                code: '',
            },
            menus: [],
            tableName: "",
            codes: [{
                num: 1,
                color: '#000',
                rotate: '10deg',
                size: '16px'
            }, {
                num: 2,
                color: '#000',
                rotate: '10deg',
                size: '16px'
            }, {
                num: 3,
                color: '#000',
                rotate: '10deg',
                size: '16px'
            }, {
                num: 4,
                color: '#000',
                rotate: '10deg',
                size: '16px'
            }],
        };
    },
    inject:['reload'],
    mounted() {
    
    },
    created() {
    
    },
    methods: {
        register() {
            this.$router.push({path: '/register'})
        },
        // 登陆
        login() {
            if (!this.rulesForm.username) {
                this.$message.error("请输入用户名");
                return;
            }
            if (!this.rulesForm.password) {
                this.$message.error("请输入密码");
                return;
            }

            login(this.rulesForm.username, this.rulesForm.password).then(res => {
                if (res.data && res.code === 200) {
                    sessionStorage.setItem("admin-token", res.data.token)
                    sessionStorage.setItem("admin-user", JSON.stringify(res.data))
                    sessionStorage.setItem("admin-userName", res.data.nickname)
                    this.$message.success("登陆成功")
                    this.carCount(res.data.id)
                } else {
                    this.$message.error(res.msg);
                }
            });
        },
        
        // 获取购物车数量
        carCount(userId) {
            carCount(userId).then(res => {
                sessionStorage.setItem("admin-carNum", res.data)
                this.pageReload()
                this.$router.replace({path: "/"});
            })
        
        },
        
        // 界面刷新
        pageReload() {
            this.reload()
        },
    }
};
</script>
<style scoped>
.loginIn {
    min-height: 70vh;
    position: relative;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-image: url(../assets/image/login-bg.jpg);
    margin: 0 17.8%;
}

.loginIn .loginInBt {
    width: 240px;
    height: 32px;
    line-height: 32px;
    margin: -10px 0px 0px 110px;
    padding: 0;
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    border-radius: 20px;
    border-width: 0;
    border-style: solid;
    border-color: rgba(142, 209, 214, 1);
    background-color: rgba(255, 215, 0, 1);
    box-shadow: 0 0 0px 5px rgba(255, 255, 255, 1);
}

.loginIn .register {
    width: 85px;
    height: 24px;
    line-height: 24px;
    margin: 20px 0px 0px 23px;
    padding: 0px 0px 0px 13px;
    color: rgba(0, 0, 0, 1);
    font-size: 12px;
    border-radius: 0;
    border-width: 0;
    border-style: solid;
    border-color: rgba(64, 158, 255, 1);
    background-color: rgba(255, 215, 0, 0);
    box-shadow: 0 0 6px rgba(255, 0, 0, 0);
    cursor: pointer;
}

.loginIn .reset {
    width: auto;
    height: 24px;
    line-height: 24px;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 1);
    font-size: 12px;
    border-radius: 0;
    border-width: 0;
    border-style: solid;
    border-color: rgba(64, 158, 255, 1);
    background-color: rgba(255, 255, 255, 0);
    box-shadow: 0 0 6px rgba(255, 0, 0, 0);
}


.loginIn .center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
}

.loginIn .right {
    position: absolute;
    left: inherit;
    right: 0;
    top: 0;
}

.loginIn .left {
    position: absolute;
    box-sizing: border-box;
    width: 490px;
    height: 490px;
    margin: 20px 0 0 -200px;
    padding: 0 0 0 10px;
    border-radius: 50%;
    border-width: 4px;
    border-style: solid;
    border-color: rgba(36, 139, 146, 1);
    background-color: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0 0px 15px rgba(255, 255, 255, 1);
}

.loginIn .left .login-form {
    background-color: transparent;
    width: 100%;
    right: inherit;
    padding: 0;
    box-sizing: border-box;
    display: flex;
    position: initial;
    justify-content: center;
    flex-direction: column;
    margin-top: 95px;
}

.loginIn .left .title-container {
    text-align: center;
    font-size: 24px;
}

.loginIn .left .title-container .title {
    width: 320px;
    line-height: 25px;
    margin: 0px 0px 28px 65px;
    padding: 10px;
    color: rgba(0, 0, 0, 1);
    font-size: 16px;
    border-radius: 0;
    border-width: 0;
    border-style: solid;
    border-color: rgba(0, 0, 0, .3);
    background-color: rgba(255, 215, 0, 0);
    box-shadow: 0 0 6px rgba(0, 0, 0, 0);
}
.loginIn .loginInBt {
    width: 130px;
    margin: -10px -67px 0 93px;
}
</style>
